<template>
    <el-container class="base_reg_user">
        <el-main>
            <el-card class="box-card">
                <headerTemplate slot="header" ref="header"
                                :table-ref="tableOptions.ref"
                                :toolbar_buttons="headerOption.toolbar_buttons"
                                :toolbar_filter="headerOption.toolbar_filter"
                                :searchForm="queryData"
                                @event="handleHeaderEvent">
                </headerTemplate>
                <div class="card_content">
                    <vxeTableTemplate :data="dataList" :options.sync="tableOptions"
                                      @event="handleTableEvent" />
                </div>
            </el-card>
        </el-main>
    </el-container>
</template>

<script>
import { mapState } from "vuex";
import sysRegUserApi from "@common/api/system/sysRegUserApi";
import poiApi from "@common/api/poiApi";
import provide from "@common/mixins/provide";

export default {
    extends: provide,
    name: "SysRegUser",
    components: {},
    data() {
        let $this = this;
        return {
            queryData: {},
            headerOption: {
                toolbar_buttons: [
                    {
                        id: "refresh",
                        icon: "el-icon-refresh-right",
                        show: true,
                        method: () => {
                            $this.getList();
                        },
                    },
                    {
                        id: "export",
                        label: '导出',
                        type: 'info',
                        icon: "el-icon-download",
                        class: 'export_btn',
                        show: true,
                        permission: 'export_base_reg_user',
                        method: () => {
                            $this.exportExcel();
                        },
                    },
                ],
                toolbar_filter: [
                    { type: "text", field: "login_id", label: "登录id" },
                    { type: "text", field: "name", label: "用户姓名" },
                    { type: "text", field: "mobile", label: "手机号码" },
                    { type: "text", field: "phone", label: "固定电话" },
                    { type: "text", field: "email", label: "Email" },
                ],
            },
            dataList: [],
            tableOptions: {
                ref: "RegUserTable",
                container: ".base_reg_user",
                columns: [
                    {
                        label: "头像",
                        prop: "head_pic",
                        align: "center",
                        width: 100,
                        cellRender: {
                            name: 'TableImage',
                        },
                    },
                    {
                        label: "登录id",
                        prop: "login_id",
                        align: "center",
                    },
                    {
                        label: "名称",
                        prop: "name",
                        align: "center",
                    },
                    {
                        label: "手机号码",
                        prop: "mobile",
                        align: "center",
                    },
                    {
                        label: "固定电话",
                        prop: "phone",
                        align: "center",
                    },
                    {
                        label: "Email",
                        prop: "email",
                        align: "center",
                    },
                    {
                        label: "用户类型",
                        prop: "user_type",
                        align: "center",
                    },
                    {
                        label: "open_id",
                        prop: "open_id",
                        align: "center",
                    },
                    {
                        label: "性别",
                        prop: "sex",
                        align: "center",
                    },
                    {
                        label: "服务期限",
                        prop: "expired_date",
                        align: "center",
                    },
                    {
                        label: "区域",
                        prop: "region",
                        align: "center",
                    },
                    {
                        label: "最近一次登录",
                        prop: "last_logined_date",
                        align: "center",
                    },
                ],
                pagination: {
                    pageIndex: 1,
                },
            },
        };
    },
    computed: {
        ...mapState([ 'userInfo' ]),
    },
    mounted() {
        this.getList();
    },
    methods: {
        handleHeaderEvent(event) {
            let $this = this;
            $this.queryData = $.extend({}, $this.queryData, event.searchForm);
            if (event.type === "search") {
                $this.getList(true);
            } else if (event.type === "refresh") {
                $this.getList(true);
            }
        },
        getList(search) {
            let $this = this;
            if (search) {
                $this.tableOptions = $this.resetTablePagination($this.tableOptions);
            }
            $this.dataList = [];
            let queryData = $this.getQueryParams($this.tableOptions, $this.queryData);
            queryData.resource_client = '1';
            sysRegUserApi.findSysRegUsers(queryData, result => {
                $this.dataList = result.data || [];
                $this.tableOptions = $this.setTableTotal($this.tableOptions, result);
            });
        },
        handleTableEvent(event) {
            if (event.type === 'page') {
                this.getList();
            }
        },
        //导出
        exportExcel() {
            let queryData = $.extend({}, this.queryData);
            //Excel通用导出
            let title_field = [
                { name: "序号", key: "_index", width: 10 },
                { name: "头像", key: "head_pic", type: 2, width: 30, height: 60 },
                { name: "登录id", key: "login_id", width: 20 },
                { name: "名称", key: "name", width: 20 },
                { name: "手机号码", key: "mobile", width: 20 },
                { name: "固定电话", key: "phone", width: 20 },
                { name: "Email", key: "email", width: 20 },
                { name: "用户类型", key: "user_type", width: 20 },
                { name: "open_id", key: "open_id", width: 20 },
                { name: "性别", key: "sex", width: 20 },
                { name: "服务期限", key: "expired_date", width: 20 },
                { name: "区域", key: "region", width: 20 },
                { name: "最近一次登录", key: "last_logined_date", width: 20 },
                { name: "创建时间", key: "create_date", width: 20 },
                { name: "状态", key: "dr" },
            ];
            let convert = {
                dr: [
                    { name: "有效", value: 0 },
                    { name: "无效", value: 1 },
                ],
                user_type: [
                    { name: "普通用户", value: 1 },
                    { name: "管理员", value: 1000 },
                ],
                sex: [
                    { name: "未知", value: 0 },
                    { name: "男", value: 1 },
                    { name: "女", value: 2 },
                ],
            };
            poiApi.exportExcel(
                title_field,
                this.$api.API_FindSysRegUsers,
                queryData,
                "注册用户",
                convert
            );
            //Excel模板导出
            // let pic_field = 'head_pic';
            // poiApi.exportExcelTemplate(sysRegUserApi.excelExportTemplateName, this.$api.API_FindSysRegUsers, queryData, '用户管理', convert, pic_field);
        },
        printTable() {
            let title_field = [];
            for (let item of this.tableOptions.columns) {
                title_field.push({
                    name: item.label,
                    key: item.prop,
                    width: item.width,
                    formatter: item.formatter,
                });
            }
            var html = this.$XEUtils.jsonToTable(title_field, this.dataList, null); //数据转换table格式html
            let printConfig = {
                sheetName: "注册用户", //页眉名称
            };
            this.$XPrint({ ...printConfig, content: html });
        },
    },
};
</script>

<style lang="less" rel="stylesheet/less" scoped>
.base_reg_user {
    height: 100%;

    .top-card {
        height: 65px !important;
    }

    .buttons {
        margin: 0 0 10px 0;
    }

    .head {
        /deep/ .el-upload--picture-card {
            display: none;
        }
    }

    .uploadPicture {
        /deep/ .el-upload--picture-card {
            width: 148px;
            height: 148px;
            line-height: 146px;
            margin-right: 60px;
        }
    }
}
</style>
